<template>
  <el-button type="primary" @click="setFlag">添加</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="id" width="180" />
    <el-table-column prop="title" label="标题" width="180" />
    <el-table-column label="头像" width="200px">
      <template #default="scope">
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :initial-index="4"
            fit="cover"
            z-index="1000"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" width="180" />
    <el-table-column label="启用禁用" width="180">
      <template #default="scope">
        <el-switch v-model="scope.row.status" class="ml-2" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="small"
          type="primary"
          link
          @click="handleEdit(scope.$index, scope.row)"
        >
          编辑
        </el-button>
        <el-popconfirm
          title="你确定要删除吗?"
          confirm-button-text="是"
          cancel-button-text="否"
          @confirm="confirmEvent(scope.row)"
          @cancel="cancelEvent"
        >
          <template #reference>
            <el-button size="small" type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 对话弹框 -->
  <el-dialog
    v-model="flag"
    :title="flags ? '添加广告位' : '编辑广告位'"
    :show-close="false"
    width="800"
  >
    <el-form
      style="max-width: 600px"
      :model="forms"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="位置类型" prop="region">
        <el-select v-model="forms.type" placeholder="">
          <el-option label="首页" value="首页" />
          <el-option label="栏目" value="栏目" />
          <el-option label="单品" value="单品" />
          <el-option label="登录" value="登录" />
        </el-select>
      </el-form-item>

      <el-form-item label="标题" prop="name">
        <el-input v-model="forms.title" />
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input v-model="forms.sort" />
      </el-form-item>

      <el-form-item label="关联商品id" prop="ids">
        <el-input v-model="forms.ids" />
      </el-form-item>

      <el-form-item>
        <el-button v-if="flags" type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button v-else type="primary" @click="updateForm(ruleFormRef)">
          确定
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup >
import { ref, reactive, toRefs, onMounted } from "vue";
import Alert from "../../components/alert/Alert.vue";
const flag = ref(false); //控制弹窗显隐
const flags = ref(true); //控制添加、修改
const form = ref({
  type: "", //位置类型
  title: "", //标题
  img: "", //图片
  sort: "", //排序
  ids: "", //关联商品id
});
const forms = ref({
  type: "", //位置类型
  title: "", //标题
  img: "", //图片z
  sort: "", //排序
  ids: "", //关联商品id
});
// 存储修改回显数据
const backData = ref();
// 点击添加按钮
const setFlag = () => {
  flags.value = true; //控制标题等主题为添加
  flag.value = true; //控制弹窗显示
  reforms()
};
// 点击编辑按钮
const handleEdit = (index, row) => {
  flags.value = false; //控制标题等主题为修改
  flag.value = true; //控制弹窗显示
  // 回显数据
  forms.value = row;
};

// 添加弹窗确定
const submitForm = async (formEl) => {
  flag.value = false; //控制弹窗隐藏
  console.log(forms.value);
};
// 编辑弹窗确定
const updateForm = async (formEl) => {
  flag.value = false; //控制弹窗隐藏
  console.log(forms.value);
};
// 添加/编辑弹窗取消
const resetForm = (formEl) => {
  flag.value = false; //控制弹窗隐藏
};
// 删除广告列表
const confirmEvent = (row) => {
  //点击确定删除
  console.log(row);
};
const cancelEvent = () => {
  //点击取消不删除
  console.log("cancel!");
};
// 数据回显归空
const reforms = () => {
  forms.value = {
    type: "", //位置类型
    title: "", //标题
    img: "", //图片z
    sort: "", //排序
    ids: "", //关联商品id
  };
};

const tableData = ref([
  {
    id: 1,
    title: "都市牧场",
    img: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
    sort: 995,
    status: true,
    type: "首页",
    ids: "ae86",
  },
  {
    id: 2,
    title: "桃李",
    img: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
    sort: 555,
    status: true,
    type: "栏目",
    ids: "ae86",
  },
  {
    id: 3,
    title: "农夫山泉",
    img: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
    sort: 111,
    status: true,
    type: "登录",
    ids: "ae86",
  },
  {
    id: 4,
    title: "可口可乐",
    img: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    sort: 755,
    status: true,
    type: "单品",
    ids: "ae86",
  },
]);
</script>
<style scoped lang="less">
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>